.root {
  :global {
    height: 100%;
		// position: relative;
		padding-bottom: 80px;
		transform: translateX(0px);
		.box{
			height: 100%;
			padding: 16px;
			overflow-y: auto;
			.title {
				font-size: 48px;
				margin-bottom: 16px;
			}
			.desc {
				background-color: rgb(248, 248, 248);
				padding: 24px;
				border-radius: 15px;
				box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.08);
				
				.info {
					display: flex;
					align-items: center;
					.anticon {
						margin-right: 8px;
					}
					.mr {
						display: flex;
						align-items: center;
						margin-right: 10px;
					}
					&,.mr{
						font-size: 18px;
					}
				}
				.tag{
					margin-top: 16px;
					font-size: 18px;
					.ant-tag{
						padding:3px 5px;
						font-size: 16px;
						color: rgb(100, 170, 211);
						cursor: pointer;

						&:hover{
							border-color: #48aff9;
							color: #7bc6fc;
						}
					}
				}
			}
			.content{
			
				overflow-y: auto;
				margin-top: 24px;
			}
		}
   
		.footer{
			position: fixed;
			left: -16px;
			bottom: -16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32px 0 24px;
			// width: calc(100% - 16px);
			width:calc( 100% + 32px);
			height: 80px;
			background-color: #fff;
			box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.08), -2px -2px 6px rgba(0, 0, 0, 0.08), ;
			// border: 1px solid springgreen;
			.ayuthname{
				margin: 0 16px;
				font-size: 24px;
				font-weight: 700;
			}
			.attentioned{
				background-color: #48aff9;
				color: #fff;
				&:hover{
					color: #fff;
					background-color: #82c7f8;
					border-color:#82c7f8 ;
				}
			}
			.left,.right{
				display: flex;
				align-items: center;
			}
		}

    // .mr{
    // 	margin-right: 10px;
    // }
  }
}
